<template>
  <div>
    <el-dialog
      title="信息"
      :model-value="true"
      width="80%"
      :before-close="handleClose"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <!-- <el-form-item label="模型名称">
            <el-input :value="info?.caseName" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="图片预览">
            <tamplate v-for="item in srcList">
              <el-image
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item"
                :preview-src-list="srcList"
              >
              </el-image>
            </tamplate>
          </el-form-item>

          <el-form-item label="产品名称">
            <el-input :value="info?.productName" disabled></el-input>
          </el-form-item>
          <el-form-item label="产品类别">
            <el-input
              :value="getListItem(info?.dictName)"
              disabled
              style="width: 100%"
            ></el-input>
            <!-- <el-col :span="6"
                ><el-input :value="info?.dictValue" disabled></el-input
              ></el-col> -->
          </el-form-item>
          <el-form-item label="产品编码">
            <el-input :value="info?.productCode" disabled></el-input>
          </el-form-item>

          <el-form-item label="模型格式">
            <el-input
              :value="getListItem(info?.modelTypeFormat, 1)"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="模型版本">
            <el-input :value="info?.productVersion" disabled></el-input>
          </el-form-item>

          <el-form-item label="软件支持">
            <el-input
              :value="getListItem(info?.modelTypeFormat, 0)"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="产品描述">
            <el-input :value="info?.remark" disabled></el-input>
          </el-form-item>

          <!-- <el-form-item label="部品规格">
            <el-input :value="info?.product_specifications" disabled></el-input>
          </el-form-item>
          <el-form-item label="产品型号">
            <el-input :value="info?.productModel" disabled></el-input>
          </el-form-item> -->

          <!-- <el-form-item label="尺寸规格">
            <el-input :value="info?.productSize" disabled></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="区域">
            <el-col :span="6" style="margin-right: 10px"
              ><el-input :value="info?.productProvince" disabled></el-input
            ></el-col>
            <el-col :span="6"
              ><el-input :value="info?.productCity" disabled></el-input
            ></el-col>
          </el-form-item> -->

          <el-form-item>
            <!-- <el-button
              type="primary"
              v-if="productState !== 3"
              @click="handelApproved(info.id, 2)"
              >审核通过</el-button
            >
            <el-button
              @click="handelApproved(info.id, 3)"
              v-if="productState !== 3"
              >审核驳回</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  editByIdRequest,
  getDeteilImgByIdRequest,
  queryProvince,
} from "@/api/buildlibrary";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    productState: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      url: "",
      srcList: [],
      areaList: [],
      radio: "",
      form: {},
    };
  },
  mounted() {
    this.getAreaList();
  },
  watch: {
    info() {
      // this.srcList = [this.info?.productImg];
      this.getimg(this.info.productImg);
    },
  },
  methods: {
    getListItem(item, index) {
      if (index === 0) {
        return item ? JSON.parse(item)[0] : "";
      } else {
        return item ? JSON.parse(item)[1] : "";
      }
    },
    async getimg(img) {
      console.log(img);
      let imgs = img.split(",");
      for (let i = 0; i < imgs.length; i++) {
        let res = await getDeteilImgByIdRequest(imgs[i]);
        let blob = new Blob([res]);
        let url = window.URL.createObjectURL(blob);
        console.log(url);
        this.srcList.push(url);
      }
    },

    handleClose(done) {
      this.$emit("closeClick", false);
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     this.$emit("closeClick", false);
      //     // done();
      //   })
      //   .catch((_) => {});
    },

    //审核操作
    async handelApproved(id, status) {
      if (status === 3) {
        ElMessageBox.prompt("请输入驳回原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,

          inputErrorMessage: "拒绝原因不能为空",
        })
          .then(async ({ value }) => {
            const res = await editByIdRequest({
              id: id,
              productState: status,
              productAuditdescription: value,
            });
            if (res.code === 200) {
              ElMessage({
                showClose: true,
                message: "编辑成功",
                type: "success",
              });
            }
            console.log(res);
            this.$emit("refiladList");
          })
          .catch(() => {});
      }
      if (status === 2) {
        const res = await editByIdRequest({
          id: id,
          productState: status,
        });
        if (res.code === 200) {
          ElMessage({
            showClose: true,
            message: "编辑成功",
            type: "success",
          });
        }
        console.log(res);
        this.$emit("refiladList");
      }
    },
    //获取地区
    async getAreaList() {
      const res = await queryProvince();
      this.areaList = res;
      let province = this.info.productProvince;
      let city = this.info.productCity;
      // console.log(this.info.productProvince);
      console.log(res);
      let provinceName = this.findIdByCode(province, res);
      let cityeName = this.findIdByCode(city, res);
      console.log(provinceName);
      console.log(cityeName);

      this.info.productProvince = provinceName;
      this.info.productCity = cityeName;
      //递归查找res中  proince的数据 返回其name
    },
    // 查找给定code对应的name
    findIdByCode(code, data) {
      const result = data.find((item) => item.code == code);
      return result ? result.name : null;
    },
  },
};
</script>
<style scoped></style>
